<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { getUserInfoApi, update,updatePass } from "@/api/user";
import { Plus } from '@element-plus/icons-vue'

const ruleForm = reactive({
	userInfo: "",
	fileList: [],
	dialogVisible: false,
	oldPassword: '',
	password: '',
	rePassword: ''
})

const ruleFormRef = ref<FormInstance>()
const rulestatusFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
	oldPassword: [{ required: true, message: '输入旧密码', trigger: 'blur' }],
	password: [{ required: true, message: '输入新密码(6到14位数字与字母组合)', trigger: 'blur' }, { min: 6, max: 14, message: '6到14位数字与字母组合', trigger: 'blur' },],
	rePassword: [{ required: true, message: '再次输入新密码', trigger: 'blur' }]
})
const init = () => {
	getUserInfoApi().then((res) => {
		ruleForm.userInfo = res.data
		ruleForm.fileList = [{ 'url': ruleForm.userInfo.avatar }]
		ruleForm.userInfo.title = ruleForm.userInfo.title == 1 ? '主任医师' : ruleForm.userInfo.title == 2 ? '副主任医师' : ruleForm.userInfo.title == 3 ? '医师' : ''
	})
}
init()
const handleAvatarSuccess = (res: any) => {
	update(res.raw).then((res) => {
		ruleForm.fileList = [{ 'url': res.data }]
	})
}
const save = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			updatePass({
				"oldPassword": ruleForm.oldPassword, "password":ruleForm.password, "rePassword": ruleForm.rePassword
			}).then((res)=>{
				ruleForm.dialogVisible = false
			})
		} else {
			console.log('error submit!', fields)
		}
	})

}
const setPass = () => {
	ruleForm.dialogVisible = true
}
</script>

<template>
	<div class="dashboard-container">
		<el-card shadow="never">
			<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
				status-icon>
				<el-row>
					<el-col :span="24">
						<el-form-item label="用户头像">
							<el-upload v-model:file-list="ruleForm.fileList" :auto-upload="false" list-type="picture-card"
								:limit="1" :on-change="handleAvatarSuccess">
								<el-icon>
									<Plus />
								</el-icon>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="姓名">
							<el-input disabled placeholder="请输入医生姓名/患者姓名/科室" v-model="ruleForm.userInfo.realName" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="科室">
							<el-input disabled placeholder="请输入医生姓名/患者姓名/科室" v-model="ruleForm.userInfo.department" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="角色">
							<el-input disabled placeholder="请输入医生姓名/患者姓名/科室" v-model="ruleForm.userInfo.title" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="">
							<el-button @click="setPass" type="primary" plain>
								<div>修改登录密码</div>
								<div> >> </div>
							</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<el-dialog v-model="ruleForm.dialogVisible" title="修改登录密码 " width="45%" :before-close="handleClose">
			<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
				status-icon>
				<el-row>
					<el-col :span="24">
						<el-form-item label="旧密码" prop="oldPassword">
							<el-input placeholder="输入旧密码" v-model="ruleForm.oldPassword" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="新密码" prop="password">
							<el-input placeholder="输入新密码(6到14位数字与字母组合)" v-model="ruleForm.password" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="确认新密码" prop="rePassword">
							<el-input placeholder="再次输入新密码" v-model="ruleForm.rePassword" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="ruleForm.dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="save(ruleFormRef)">
						保存
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
  

<style lang="scss" scoped>
.dashboard-container {
	width: 100%;

	:deep(.el-card__body) {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding-left: 199px;

		.el-form-item__content {
			width: 300px;
		}

		.el-row {
			margin-top: 40px;
		}

		.el-button {
			width: 150px;
			height: 32px;
			border-radius: 5px;
			padding: 0 10px !important;

			span {
				width: 150px;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}

	:deep(.el-dialog__body) {
		padding: 25px 100px;
	}
}
</style>